﻿@section ExternalDependencies {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.3.1/exceljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
}

<div id="exportContainer">
    @(Html.DevExtreme().Button()
        .Text("Export multiple grids")
        .Icon("xlsxfile")
        .OnClick("exportGrids"))
</div>
@(Html.DevExtreme().TabPanel()
        .ID("tabPanel")
        .DataSource(new[] {
            new { text = "Price" },
            new { text = "Rating" }
        })
        .ItemTemplate(new JS("tabPanelTemplate"))
        .ItemTitleTemplate(@<text><span class="dx-tab-text"><%- text %></span></text>)
        .DeferRendering(false))

<script>
    var priceCaption = "Price";
    var ratingCaption = "Rating";

    function tabPanelTemplate(itemData, itemIndex, itemElement) {
        if (itemData.text === priceCaption) {
            var $gridContainer = $("<div id='priceDataGrid'>");

            itemElement.append($gridContainer);

            $gridContainer.dxDataGrid({
                width: "100%",
                columns: [
                    { dataField: "Product_ID", caption: "ID", width: 50 },
                    { dataField: "Product_Name", caption: "Name" },
                    { dataField: "Product_Sale_Price", caption: "Sale Price", dataType: "number", format: "currency" },
                    { dataField: "Product_Retail_Price", caption: "Retail Price", dataType: "number", format: "currency" }
                ],
                showBorders: true,
                rowAlternationEnabled: true,
                dataSource: {
                    store: {
                        type: "odata",
                        url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
                    },
                    select: ["Product_ID", "Product_Name", "Product_Sale_Price", "Product_Retail_Price"],
                    filter: ["Product_ID", "<", 10]
                }
            });
        }

        if (itemData.text === "Rating") {
            var $gridContainer = $("<div id='ratingDataGrid'>");

            itemElement.append($gridContainer);

            $gridContainer.dxDataGrid({
                width: "100%",
                columns: [
                    { dataField: "Product_ID", caption: "ID", width: 50 },
                    { dataField: "Product_Name", caption: "Name" },
                    { dataField: "Product_Consumer_Rating", caption: "Rating" },
                    { dataField: "Product_Category", caption: "Category" }
                ],
                showBorders: true,
                rowAlternationEnabled: true,
                dataSource: {
                    store: {
                        type: "odata",
                        url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
                    },
                    select: ["Product_ID", "Product_Name", "Product_Consumer_Rating", "Product_Category"],
                    filter: ["Product_ID", "<", 10]
                }
            });
        }
    }

    function exportGrids() {
        var dataGrid1 = $("#priceDataGrid").dxDataGrid("instance");
        var dataGrid2 = $("#ratingDataGrid").dxDataGrid("instance");

        var workbook = new ExcelJS.Workbook();
        var priceSheet = workbook.addWorksheet(priceCaption);
        var ratingSheet = workbook.addWorksheet(ratingCaption);

        priceSheet.getRow(2).getCell(2).value = "Price";
        priceSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: "double" };

        ratingSheet.getRow(2).getCell(2).value = "Rating";
        ratingSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: "double" };

        function setAlternatingRowsBackground(gridCell, excelCell) {
            if (gridCell.rowType === "header" || gridCell.rowType === "data") {
                if (excelCell.fullAddress.row % 2 === 0) {
                    excelCell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "D3D3D3" }, bgColor: { argb: "D3D3D3" } };
                }
            }
        }

        DevExpress.excelExporter.exportDataGrid({
            worksheet: priceSheet,
            component: dataGrid1,
            topLeftCell: { row: 4, column: 2 },
            customizeCell: function (options) {
                setAlternatingRowsBackground(options.gridCell, options.excelCell)
            }
        }).then(function () {
            return DevExpress.excelExporter.exportDataGrid({
                worksheet: ratingSheet,
                component: dataGrid2,
                topLeftCell: { row: 4, column: 2 },
                customizeCell: function (options) {
                    setAlternatingRowsBackground(options.gridCell, options.excelCell)
                }
            });
        }).then(function () {
            workbook.xlsx.writeBuffer().then(function (buffer) {
                saveAs(new Blob([buffer], { type: "application/octet-stream" }), "MultipleGrids.xlsx");
            });
        });
    }
</script>
